import React,{useState} from 'react'
import { SearchBar,Space,Tag } from 'antd-mobile'
import useDebounce from '../../hooks/useDebounce'
function Search() {
    const [data,setData]=useState(
        JSON.parse(localStorage.getItem('data')) || []
    )
    // 搜索
   const onSearch=useDebounce((value)=>{
    const newData=data.concat(value)
    setData(newData)
    localStorage.setItem('data', JSON.stringify(newData))
   })
//删除指定内容
const del=(content)=>{
    const newData=data.filter(v=>v !== content)
    setData(newData)
    localStorage.setItem('data', JSON.stringify(newData))
}
const clear=()=>{
    setData([])
    localStorage.setItem('data', JSON.stringify([]))
}
  return (
    <div>
      <SearchBar placeholder='目的地/酒店/景点/关键字' onSearch={onSearch}></SearchBar>
      <div>
        <h3>历史记录<span onClick={()=>clear()}>清空</span></h3>
        <Space>
            {
                data.map((v,i)=>{
                    return <Tag key={i}>
                        <span>{v}</span>
                        <span onClick={()=>del(v)}>x</span>
                    </Tag>
                })
            }
        </Space>
      </div>
    </div>
  )
}

export default Search
